<template>
  <!-- 我的订单 -->
  <div class="box">
    <div
      class="goods_text"
      v-show="show"
    >
      暂无数据
    </div>
    <van-list
      v-if="list.length!=0"
      v-model="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="我是有底线的"
      @load="onLoadlist"
    >
      <van-row
        style="background:#fff;margin-top:10px"
        v-for="(item,i) in list"
        :key="i"
      >
        <div style="padding:10px 20px;">
          <div
            class="clearfix"
            style="font-size:14px"
          >
            <span class="left">{{item.goods_name}}</span>
            <span class="right">{{item.number}}(件)</span>
          </div>
          <div class="clearfix goods_content">
            <div class="left goods_img">
              <div class="goods_border"><img :src="item.img_url"></div>
            </div>
            <ul class="right">
              <li>单价：<span>{{item.g_intergral}}福分</span></li>
              <li>总价：<span>{{item.integral}}福分</span></li>
              <li>兑换码：<span>{{item.code}}</span></li>
            </ul>
          </div>
          <div>
            <span>{{item.create_time}}</span>
            <span class="right">
              <span v-if="item.status==1">已兑换</span>
              <span
                v-else-if="item.status==2"
                style="color:#f44336"
              >未兑换</span></span>
          </div>
        </div>
        <div style="height:15px;background: #f8f8fa"></div>
      </van-row>
    </van-list>
  </div>
</template>

<script type="text/javascript">
import { Row } from "vant";
export default {
  data() {
    return {
      show: false,
      list: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1,
      page: 0
    };
  },
  components: {
    [Row.name]: Row
  },
  created() {
    this.getRecordlist(0);
    dd.biz.navigation.setTitle({
      title: "兑换记录" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    // 加载
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getRecordlist(p);
    },
    async getRecordlist(cursor) {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http
        .get(
          `yuepoints/Welfare/recordlist?corpId=${corpId}&userId=${userId}&page=${cursor}`
        )
        .then(res => {
          const { data, cursor } = res.data;
          if (data.length === 0 || data === null) {
            this.finished = true;
            this.show = true;
            // this.$toast("数据为空！");
            return;
          }
          if (data.length < this.pageSize) {
            this.finished = true;
          }
          if (this.pageIndex === 1) {
            this.list = data;
          } else {
            this.list = this.list.concat(data);
          }
          if (cursor > 0) {
            this.show = false;
            this.page = cursor;
          }
        })
        .catch(error => {
          this.$toast({
            showClose: true,
            message: "获取资源列表异常{" + error + "}",
            type: "error"
          });
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-bottom: 55px;
  font-size: 13px;
  text-align: left;

  .goods_text {
    text-align: center;
    margin: 10px;
    font-size: 14px;
    color: silver;
  }
  .goods_content {
    margin: 5px 0px;
    .goods_img {
      width: 35%;
      height: 100px;
      border: 1px solid silver;
      border-radius: 5%;
      .goods_border {
        margin: 2px auto;
        width: 98%;
        height: 95px;
        border: 1px solid silver;
        border-radius: 5%;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    ul {
      border-top: 1px solid silver;
      width: 61%;
      padding: 6px 0px 0px 10px;
      li {
        margin-bottom: 10px;
      }
    }
  }

  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
